<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>资料详情页</title>
    <meta charset="UTF-8">
    <base href="${pageContext.request.contextPath}/">
    <meta name="renderer" content="webkit">
    <link href="css/bootstrapValidator.min.css" rel="stylesheet">
    <title>HPELearn</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/global.css">

</head>
<body>
<!--starthead-->
<jsp:include page="../../head.jsp"></jsp:include>
<!--endHead-->


<!--startContent-->
<div class="col-lg-10 col-lg-offset-1" style="padding: 0;margin-top: 82px">
    <h3>信息预览</h3>
    <div class="col-lg-12" style="background-color:gainsboro;height:450px;">

    </div>
</div>

<div class="col-lg-10 col-lg-offset-1" style="padding:0;">
    <h4>资料信息</h4>
    <p>
        偏移是一个用于更专业的布局的有用功能。它们可用来给列腾出更多的空间。例如，.col-xs=* 类不支持偏移，但是它们可以简单地通过使用一个空的单元格来实现该效果。 为了在大屏幕显示器上使用偏移，请使用 .col-md-offset-* 类。这些类会把一个列的左外边距（margin）增加 * 列，其中 * 范围是从 1 到 11。
    </p>
</div>

<div class="col-lg-12" style="padding: 0;">
    <div class="col-lg-10 col-lg-offset-1" style="padding: 0;">
        <div class="col-lg-8" style="padding: 0; float: left;">
            <h4>技术问答</h4>
            <div class="col-lg-12">
                <form class="form-horizontal">

                    <div class="form-group">
                        <label>标题</label>
                        <input type="email" class="form-control" placeholder="请输入问题标题">
                    </div>

                    <div class="form-group">
                        <label>内容</label>
                        <textarea class="form-control" rows="3" placeholder="请输入问题内容" style="height:250px;"></textarea>
                    </div>
                    <button type="button" class="btn btn-primary col-lg-2 col-lg-offset-10">提交</button>
                </form>
            </div>
            <h4>相关资料</h4>
            <div class="col-lg-12" style="padding:0">
                <div class="col-lg-3" style="background-color: gold; height:180px;">

                </div>
                <div class="col-lg-3" style="background-color:red; height: 180px;">

                </div>
                <div class="col-lg-3" style="background-color:cadetblue; height: 180px;">

                </div>
                <div class="col-lg-3" style="background-color:limegreen; height: 180px;">

                </div>
            </div>
        </div>

        <div class="col-lg-4" style="height: 400px; float: left;">
            <div class="col-lg-12">
                <h4>资料等级</h4>
                <form action="#" method="post">
                    <div class="form-group">
                        <label>评论</label>
                        <textarea class="form-control" rows="3" placeholder="评论内容"></textarea>
                    </div>
                    <button type="button" class="btn btn-primary  btn-sm col-lg-3 col-lg-offset-9">提交</button>
                </form>
            </div>
            <div class="col-lg-12">
                <h4>用户评论</h4>
                <ul style="list-style: none;">
                    <li style="margin-top: 10px; height: 70px; padding: 0;">
                        <div class="col-lg-12" style="padding: 0;">
                            <img src="images/ic.jpg" style="width:70px;float: left;" />
                            <div style="float: left;">

                                <span style="float:right;">2016/9/23</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<!--endContent-->
<jsp:include page="../../footer.jsp"></jsp:include>
</body>
</html>
